<template>
  <div class="volunteer">
    <el-empty v-if="!noData"
              description="您未有志愿者报名记录.......">
      <el-link type="primary" @click="toMoreInformation">查看更多志愿者信息</el-link>
    </el-empty>

    <el-table
        :data="volunteerTable"
        style="width: 100%"
        highlight-current-row
        v-if="noData"
        height="600"
        stripe
    >
      <el-table-column
          label="序号"
          type="index"
          width="50px">
        <template slot-scope="scope">
          {{scope.$index+1}}
        </template>
      </el-table-column>
      <el-table-column
          prop="activity.activityTitle"
          label="活动标题">
        <template slot-scope="scope">
          <el-link @click="toVolunteerParticulars(scope.row.activity.activityId)" target="_blank">{{scope.row.activity.activityTitle}}</el-link>
        </template>
      </el-table-column>
      <el-table-column
          prop="activity.activityPlace"
          label="活动地点">
      </el-table-column>
      <el-table-column
          prop="activity.activityStarttime"
          label="活动开始时间"
          sortable>
        <template slot-scope="scope">
          {{shortTime(scope.row.activity.activityStarttime)}}
        </template>
      </el-table-column>
      <el-table-column
          prop="activity.activityEndtime"
          label="活动结束时间"
          sortable>
        <template slot-scope="scope">
          {{shortTime(scope.row.activity.activityEndtime)}}
        </template>
      </el-table-column>
      <el-table-column
          prop="registrationTime"
          label="报名时间"
          sortable>
        <template slot-scope="scope">
          {{shortTime(scope.row.registrationTime)}}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>


import {shortTime} from "../../../../utils/timeFormat";
import {getVolunteerRegistrationByUserId} from "@/api/allApi";

export default {
  name: "Volunteer",
  data() {
    return {
      noData:false,
      volunteerTable:[],
      user:'',
    }
  },
  created() {
    this.user = JSON.parse(window.localStorage.getItem('access-user'))
  },
  methods: {
    shortTime,
    getVolunteerRegistrationByUserId() {
      getVolunteerRegistrationByUserId(this.user.userId).then(res=>{
        if (res.data.success) {
          if (res.data.data.length > 0){
            console.log(res.data.data.length)
            this.noData = true
          }
          this.volunteerTable = res.data.data
        }
      })
    },
    toVolunteerParticulars(volunteerId) {
      this.$router.push({
        path: "/userLayout/volunteerParticulars/"+volunteerId,
      });
    },
    toMoreInformation() {
      this.$router.push({
        path: "/userLayout/moreInformation",
      });
    },
  },
  mounted() {
    this.getVolunteerRegistrationByUserId()

  }


}
</script>

<style scoped>

</style>